<template>
  <div class="common-header">
    <!-- 左侧区域：按钮和面包屑 -->
    <div class="left-section">
      <div class="btn">
        <el-button
          type="warning"
          size="small"
          icon="menu"
          @click="isCollapsed = !isCollapsed" />
      </div>
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">后台首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- 右侧区域：头像 和 下拉菜单 -->
    <div class="right-section">
      <div class="drop-menu">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <el-avatar :src="Uistore.getAvatarUrl('avatar')" />
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="UserFilled">个人中心</el-dropdown-item>
              <el-dropdown-item :icon="Back" @click="openLogoutBox">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UserFilled, Back, ArrowRight } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
// import { ref } from 'vue';
const route = useRoute()
const router = useRouter()
// 引入使得侧边栏开启关闭的显示变量  为了统一管理 我使用的是pinia
import { useUIStore } from '@/stores/UI'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { ElMessageBox, ElMessage } from 'element-plus'
const Uistore = useUIStore()
const { isCollapsed } = storeToRefs(Uistore)
const userStore = useUserStore()

const openLogoutBox = () => {
  ElMessageBox.confirm(
    '您确定退出登录吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      try {
        const res = await userStore.logoutPinia()
        if (res.success) {
          ElMessage({
            type: 'success',
            message: '退出登录成功'
          })
          router.replace('/login')
        } else {
          // 后端返回非200状态，但前端已清除状态，仍视为成功
          ElMessage({
            type: 'success',
            message: '退出登录成功'
          })
          router.replace('/login')
        }
      } catch {
        // 网络错误等情况，但前端已清除状态，仍视为成功
        ElMessage({
          type: 'success',
          message: '退出登录成功'
        })
        router.replace('/login')
      }
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '退出登录取消'
      })
    })
}

</script>

<style scoped lang="scss">
.common-header {
  height: 60px;
  padding: 0 24px;
  background: linear-gradient(45deg, #800909, #8B0000);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;

  .left-section {
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease-in-out;

    .btn {
      .el-button {
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      transition: all 0.3s ease-in-out;

      .el-breadcrumb {
        display: flex;
        align-items: center;

        // 优化面包屑样式
        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
          }

          // 第一个面包屑（后台首页）- 黑色样式
          &:first-child {
            .el-breadcrumb__inner {
              color: #000000 !important;
              background: rgba(255, 255, 255, 0.9);
              padding: 4px 12px;
              border-radius: 6px;
              border: 1px solid rgba(0, 0, 0, 0.1);

              &:hover {
                color: #000000 !important;
                background: #ffd700 !important; // 黄色hover高亮
                transform: scale(1.03);
                box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
              }
            }
          }

          // 第二个面包屑（当前页面标题）- 白色样式
          &:last-child {
            .el-breadcrumb__inner {
              color: #ffffff !important;
              font-weight: 600;
              background: rgba(255, 255, 255, 0.15);
              padding: 4px 12px;
              border-radius: 6px;
              border: 1px solid rgba(255, 255, 255, 0.2);
            }
          }
        }

        // 分隔符样式
        :deep(.el-breadcrumb__separator) {
          color: rgba(255, 255, 255, 0.7) !important;
          margin: 0 8px;
        }
      }
    }
  }

  .right-section {
    transition: all 0.3s ease;

    &:hover {
      cursor: pointer;
      transform: scale(1.05);

      .drop-menu {
        .el-dropdown-link {
          color: #409eff;
        }
      }
    }

    .drop-menu {
      .el-dropdown-link {
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;

        .el-avatar {
          transition: all 0.3s ease;
        }

        .el-icon--right {
          transition: all 0.3s ease;
        }
      }
    }
  }
}
</style>
